<template>
  <div>
    <van-search v-model="searchValue" placeholder="请输入搜索关键词" @search="handleSearch"/>
    <p>
      <span>历史记录：</span>
      <b style="padding:6px 12px;" v-for="(v, i) in local" :key="i">{{ v }}</b>
    </p>
    <List :list="list"/>
  </div>
</template>

<script>
import axios from 'axios'
import List from '@/components/List'
export default {
  name: 'Search',
  data() {
    return {
      searchValue: '',
      list: [],
      local: JSON.parse(localStorage.getItem('local')) || []
    }
  },
  methods: {
    // 搜索
    search() {
      axios.post('/api/search', { searchValue: this.searchValue }).then(resp => {
        this.list = resp.data.data
      })
    },
    // 回车的时候 进行搜索
    handleSearch() {
      this.search();
      this.local.push(this.searchValue);
      localStorage.setItem('local', JSON.stringify(this.local))
    }
  },
  components: {
    List
  },
  created() {
    //  默认请求搜索的数据
    this.search()
  }
}
</script>